<template>
  <div>
      <header>
        <div class="logo">
            <a href="#">
                <img src="../assets/logo.svg" alt="">
            </a>
        </div>
        <nav>
            <ul>
                <li><a>首页</a></li>
                <li><a>云服务 ﹀</a></li>
                <li><a>产品 ﹀</a></li>
                <li><a>开发 ﹀</a></li>
                <li><a>社区</a></li>
                <li><a>博客</a></li>
                <li><a>关于</a></li>
                <li><a>登录 ﹀</a></li>
            </ul>
        </nav>
    </header>

    <div class="content">
        <div class="paytype">
            <p>支付系统使用Jeepay搭建，支持微信、支付宝、云闪付的服务商和普通商户模式下单，该页面提供Jeepay支付体验流程。</p>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'Header_1'
}
</script>

<style>
header {
    /* width: 100vw; */
    height: 80px;
    padding: 0 7.135417vw;
    padding: 0 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    border-bottom: rgba(0, 0, 0, 0.08) solid 1px;
    background: #EDEFF2 !important;
}

.logo {
    display: flex;
}

.logo a {
    height: 30px;
    padding: 0;
    margin: 0;
}

.logo a img {
    width: 100%;
    height: 100%;
}

nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

nav ul li {
    float: left;
    margin: 0 20px;
    padding: 0 5px;
    font-weight: 400;
    font-size: 15px;
    font-family: "microsoft yahei";
    color: #999;
}

nav ul li a {
    color: #999;
}

nav ul :first-child a {
    color: #5781FF;
}

.content {
    padding-top: 30px;
    background-color: #f4f2f7;
}

.paytype {
    margin: 0 auto;
    width: 1120px;
    background-color: rgb(255, 242, 224);
    color: rgb(68, 181, 73);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
}

.paytype p {
    margin-bottom: 10px;
    line-height: 28px;
    font-size: 14px;
}
</style>